<template>
  <div class="pool" @click="$router.push('/service/group-list')">
    <div class="show">
      <div class="title">创业补贴奖金池:</div>
      <div class="total" v-if="total >= 0">
        <ul>
          <li
            v-for="(item, index) in vip"
            :key="index"
          >
            <span class="text">{{ item.name }}奖金池:</span>
            <span class="amount">￥{{ +Number.parseFloat(total / 100 * +item.ratio).toFixed(2) }}</span>
          </li>
        </ul>
      </div>
<!--      <div class="add">最后一轮添加: ￥{{ +add }}</div>-->
    </div>
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'Pool',
  data() {
    return {
      total: -1,
      add: 0,
      vip: []
    }
  },
  created () {
    api.My.getPoolTotal().then(response => {
      let { data } = response
      data = base64.parse(data)
      this.total = +data.total
      this.add = data.add
      this.vip = data.vip
    })
  }
}
</script>

<style scoped lang="stylus">
.pool
  //margin-bottom 10px
  background $background_color
  padding-bottom 10px
  .show
    background white
    min-height 80px
    border-radius 10px
    padding 10px
    //border 1px solid $main_color
    .title
      height 30px
      line-height 30px
      font-weight 700
      text-align left
    .total
      //height 50px
      //line-height 50px
      //color red
      //font-weight 700
      //font-size 16px
      li
        height 20px
        line-height 20px
        display flex
        .text
          flex 1
          text-align right
        .amount
          flex 1
          text-align left
          padding-left 5px
          color red
    .add
      height 30px
      line-height 30px
</style>
